<template><!-- 商品组件 -->
  <div class="goods" v-if="goodsList.length > 0">
    <div class="back" @click="clickGoods">
      <div class="text">
        {{goodsList[0].title}}
      </div>
      <div class="gobuy" @click.stop="goGood"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      goodsList: Array,
      handlePopupsShow: Function, // 打开橱窗商品弹出层
    },
    data() {
      return {

      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      clickGoods() {
        // 一件商品直接跳转
        if (this.goodsList.length === 1) {
          this.$emit('formChildMsg', {
            type: 'goShop',
            item: this.goodsList[0]
          })
          return;
        }
        this.handlePopupsShow()
      },
      // 点击去购买
      goGood(){
        this.$emit('formChildMsg', {
          type: 'goShop',
          item: this.goodsList[0]
        })
      }
    },
  }
</script>

<style scoped lang="less">
  .goods {
    padding: 0 24px;
    margin: 10px 0;

    .back {
      width: 704px;
      height: 90px;
      background-image: url('../../../../../assets/images/pureVideo/goodsBack.png');
      background-repeat: no-repeat;
      background-size: 100%;
      display: flex;
      align-items: center;
      padding: 0 28px;

      .text {
        width: 500px;
        height: 48px;
        font-size: 24px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #FFC4A2;
        line-height: 48px;
        letter-spacing: 1px;
        background: linear-gradient(118deg, #FFDBC6 0%, #FFC3A2 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .gobuy{
        width: 124px;
        height: 48px;
        margin-left: 20px;
      }
    }
  }
</style>